<script setup>
import { nextTick, onBeforeUpdate, onUpdated, ref, watchEffect, watchPostEffect, watchSyncEffect } from 'vue'

const x = ref(0)

function addX() {
  x.value++
}

const timer = setInterval(() => {
  addX()
}, 1000)

/* 
第一个参数就是要运行的副作用函数。
这个副作用函数的参数也是一个函数，用来注册清理回调。
清理回调会在该副作用下一次执行前被调用，可以用来清理无效的副作用，例如等待中的异步请求。
*/
watchEffect((onCleanup) => {
  onCleanup(() => {
    // 处理失效回调
    clearInterval(timer)
  })
  // console.log(x.value)
})

const count = ref(0)
const countAdd = () => {
  count.value++
}

/* 
  nextTick和watchPostEffect效果一致，可以获取到更新后的DOM
  * 所谓的更新后的DOM，就是标签中的元素或者属性变化
*/
// 要手动停止一个侦听器，调用 watch 或 watchEffect 返回的函数：
const stop = watchEffect(() => {
  console.log('watchEffect', count.value);
  console.log(document.querySelector('#value') && document.querySelector('#value').innerText, 111);
  nextTick(()=>{
    console.log(document.querySelector('#value') && document.querySelector('#value').innerText, 222);
  })
})
const stopWatch = () => {
  console.log('停止监听');
  stop()
}
/* 
flush: pre(默认) post sync

对于sync：
在某些特殊情况下 (例如要使缓存失效)，可能有必要在响应式依赖发生改变时立即触发侦听器。这可以通过设置 flush: 'sync' 来实现。
然而，该设置应谨慎使用，因为如果有多个属性同时更新，这将导致一些性能和数据一致性的问题。
所以，不推荐使用sync

*/
// watchEffect(()=>{
//   console.log(count.value, document.querySelector('#value') && document.querySelector('#value').innerText);
// }, { flush: 'post' })
// watchPostEffect(() => {
//   console.log(count.value, document.querySelector('#value') && document.querySelector('#value').innerText);
// })

// 顺序：watchSyncEffect → watchEffect → onBeforeUpdate → watchPostEffect → onUpdated
// watchSyncEffect(() => {
//   console.log('watchSyncEffect', count.value);
// })
// watchEffect(() => {
//   console.log('watchEffect', count.value);
// })
// onBeforeUpdate(() => {
//   console.log('onBeforeUpdate', count.value);
// })
// watchPostEffect(() => {
//   console.log('watchPostEffect', count.value);
// })
// onUpdated(() => {
//   console.log('onUpdated', count.value);
// })



</script>

<template>
  <div id="value">{{ count }}</div>
  <button @click="countAdd">增加</button>
  <button @click="stopWatch">停在监听</button>
</template>

<style></style>
